<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html
	class="wf-proximanova1proximanova2-n1-active wf-proximanova1proximanova2-n4-active wf-proximanova1proximanova2-i4-active wf-proximanova1proximanova2-n6-active wf-proximanova1proximanova2-n7-active wf-proximanova1proximanova2-n9-active wf-ffmetaserifwebpro1ffmetaserifwebpro2-n5-active wf-ffmetaserifwebpro1ffmetaserifwebpro2-n7-active wf-comeniasansweb1comeniasansweb2-n4-active wf-comeniasansweb1comeniasansweb2-n7-active wf-bellopro1bellopro2-n4-active wf-coquette1coquette2-n4-active wf-coquette1coquette2-n7-active wf-active">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css" href="./css/main.css">
		<!--[if IE 7]>
	    <link rel="stylesheet" type="text/css" href="./css/ie7.css">
	<![endif]-->
		<!--[if lte IE 8]>
	    <style type="text/css">
	    	#bio_container ul, #bio_container ol { height:0; overflow:visible; }
			#bio_container ul, #bio_container ol { height:1%; }
	    </style>
	<![endif]-->
		<title>Welcome to NetCard</title>

	</head>
	<body class="homepage infopage">
		<div id="header-background"></div>
		<div id="header-wrap">
			<div id="header" class="clearfix">
				<ul class="nav accountlinks">
					<li>
						Already registered?
						<a href="login.jsp" class="plain yellow">登录</a>
					</li>
				</ul>
				<div class="logo">
					<a href="#">&nbsp;</a>
				</div>
				<ul class="nav applinks">
					<li class="people">
						<a href="#" class="toggle"> People </a>
						<ul class="people-menu">
							<li class="people-alt">
								<a href="#" class="toggle">People</a>
							</li>
							<li>
								<a href="#">Directory</a>
							</li>
							<li>
								<a href="#">Search</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<div id="content_top" style="display: none;">
		</div>
		<!-- Confirmation messaging added -->
		<div id="msg" style="display: none;">
			<p id="msg-confirm">
				<span class="msg-confirmtext"></span>
			</p>
		</div>
		<div id="content" class="clearfix">
			<div class="row">
				<div class="column left">
					<div class="banner">
						<div class="logo"></div>
						<h2 class="caps bannertext">
							A custom profile &amp; personal analytics dashboard
						</h2>
					</div>
					<div class="signupform">
						<form
							action="http://127.0.0.1:8080/NetCardSever/jsp/RegisterServlet"
							method="post">
							<p class="formdescription">
								Sign up to quickly build your personal profile page that points
								users to your content from around the web.
							</p>
							<fieldset>
								<label for="email">
									Email Address
								</label>
								<input type="text" class="text required email-custom"
									name="email" id="email" maxlength="254">
							</fieldset>
							<fieldset>
								<label for="email">
									Password
								</label>
								<input type="password" id="password" name="password"
									class="required password-custom password-stronger text"
									maxlength="64">
							</fieldset>
							<fieldset>
								<label for="email">
									Cofirm Password
								</label>
								<input type="password" id="Cofirmpassword" name="Cofirmpassword"
									class="required password-custom password-stronger text"
									maxlength="64">
							</fieldset>
							<p class="buttons">
								<button type="submit"
									class="button button-xlarge button-default" id="submitbutton">
									<span class="button-content">Create Your Profile</span>
								</button>
							</p>
							<p class="fineprint gray italic">
								By signing up you agree to our
								<a href="#">Terms of Service</a> and
								<a href="#">Privacy Policy</a>.
							</p>
						</form>
					</div>
				</div>
				<div class="column left homepage-examples">
					<a href="#" class="example example-large" id="exampleprofile"><span
						class="thumb"><img class="placeholder"
								src="./img/nicolelapin.jpg"> </span> </a>
					<div class="example example-small" style="margin-right: 13px">
						<span class="thumb"><img src="./img/stats-example.gif">
						</span>
					</div>
					<div class="example example-small">
						<span class="thumb"><img src="./img/datastack-example.gif">
						</span>
					</div>
				</div>
			</div>
			<div class="whosusingit directory clear">
				<hr class="separator">
				<div class="buttonbar right clearfix" id="carousel-nav">
					<span
						class="button button-small button-blue button-first button-disabled"><span
						class="button-content">«</span> </span><span
						class="button button-small button-blue button-active"><span
						class="button-content">1</span> </span><span
						class="button button-small button-blue"><span
						class="button-content">2</span> </span><span
						class="button button-small button-blue"><span
						class="button-content">3</span> </span><span
						class="button button-small button-blue button-last"><span
						class="button-content">»</span> </span>
				</div>
				<h3>
					推荐用户
					<span class="directorylink"><a href="#">Browse Directory
							»</a> </span>
				</h3>
				<div class="jcarousel-container jcarousel-container-horizontal"
					style="position: relative; display: block;">
					<div class="jcarousel-clip jcarousel-clip-horizontal"
						style="overflow-x: hidden; overflow-y: hidden; position: relative;">
						<ul
							class="carousel directory-carousel clear jcarousel-list jcarousel-list-horizontal"
							id="carousel"
							style="overflow-x: hidden; overflow-y: hidden; position: relative; top: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; width: 2800px; left: 0px;">
							<li
								class="page clearfix jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal"
								style="list-style-type: none; list-style-position: initial; list-style-image: initial; float: left;"
								jcarouselindex="1">
								<a href="#" class="example"><span class="thumb"><img
											src="./img/jamalmashburn.jpg" alt="Jamal Mashburn"> </span><span
									class="name">Jamal Mashburn&nbsp;</span> </a><a href="#"
									class="example"><span class="thumb"><img
											src="./img/dickcostolo.jpg" alt="Dick Costolo"> </span><span
									class="name">Dick Costolo&nbsp;</span> </a><a href="#"
									class="example"><span class="thumb"><img
											src="./img/leolaporte.jpg" alt="Leo Laporte"> </span><span
									class="name">Leo Laporte&nbsp;</span> </a>
							</li>
							<li
								class="page clearfix jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal"
								style="list-style-type: none; list-style-position: initial; list-style-image: initial; float: left;"
								jcarouselindex="2">
								<a href="#" class="example"><span class="thumb"><img
											src="./img/cat.jpg" alt="Catherine Valdes"> </span><span
									class="name">Catherine Valdes&nbsp;</span> </a><a href="#"
									class="example"><span class="thumb"><img
											src="./img/lisabettany.jpg" alt="Lisa Bettany"> </span><span
									class="name">Lisa Bettany&nbsp;</span> </a><a
									href="http://about.me/lindsaycampbell" class="example"><span
									class="thumb"><img src="./img/lindsaycampbell.jpg"
											alt="Lindsay Campbell"> </span><span class="name">Lindsay
										Campbell&nbsp;</span> </a>
							</li>
							<li
								class="page clearfix jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal"
								style="list-style-type: none; list-style-position: initial; list-style-image: initial; float: left;"
								jcarouselindex="3">
								<a href="#" class="example"><span class="thumb"><img
											src="./img/chriscunningham.jpg" alt="Chris Cunningham">
								</span><span class="name">Chris Cunningham&nbsp;</span> </a><a href="#"
									class="example"><span class="thumb"><img
											src="./img/tonyconrad.jpg" alt="Tony Conrad"> </span><span
									class="name">Tony Conrad&nbsp;</span> </a><a href="#"
									class="example"><span class="thumb"><img
											src="./img/kevinrose.jpg" alt="Kevin Rose"> </span><span
									class="name">Kevin Rose&nbsp;</span> </a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="footer">
			<hr class="separator">
			<div class="dark_gray left">
				<a href="#">Home</a>
				<span class="divider">|</span>
				<a href="#">About Us</a>
				<span class="divider">|</span>
				<a href="#">Directory</a>
				<span class="divider">|</span>
				<a href="#">Terms of Use</a>
				<span class="divider">|</span>
				<a href="#">Privacy Policy</a>
				<span class="divider">|</span>
				<a href="#">Contact</a>
				<span class="divider">|</span>
				<a href="#" class="twitter">Follow us on Twitter</a>
			</div>
			<div class="dark_gray right">
				© 2011 AOL Inc. All Rights Reserved.
			</div>
		</div>
		<script type="text/javascript"
			src="./Welcome to about.me_files/jquery_plus.min.js"></script>
		<script type="text/javascript"
			src="./Welcome to about.me_files/aboutme.js"></script>
		<script language="javascript" type="text/javascript"> 
    	//AboutMe.g = {};
    	//AboutMe.g.STATIC_HOSTNAME = "https://gp1.wac.edgecastcdn.net/802659/production67";
    	//AboutMe.g.AWS_THUMBNAIL = "aboutme-prod-thumbnail.s3.amazonaws.com";
    </script>
		<script type="text/javascript"> 
//
/*window.unload = function(){};
function checkLength(value,min,max) {
	if (value.length > max || value.length < min) {
		return false;
	} else {
		return true;
	}
}
function checkRegexp(value,regexp,n) {
	if (! regexp.test(value)) {
		return false;
	} else {
		return true;
	}
}
// TODO: migrate ajax form setup into Homepage glob
var Home = {
	carousel: {
		selector: '#carousel',
		navselector: '#carousel-nav',
		imgsize: '260x176',
		linkpagenumbers: true,
		peopleperpage: 3,
		people: [
			["dickcostolo","Dick Costolo"],
			["jamalmashburn","Jamal Mashburn"],
			["lisabettany","Lisa Bettany"],
			["leolaporte","Leo Laporte"],
			["cat","Catherine Valdes"],
			["tonyconrad","Tony Conrad"],
			["chriscunningham","Chris Cunningham"],
			["lindsaycampbell","Lindsay Campbell"],
			["kevinrose","Kevin Rose"]
		]
	},
	examples: [
//		['alex'],
//		['pascal'],
//		['ryan'],
//		['tony'],
//		['philblack'],
//		['nathan'],
		'nicolelapin',
		'veronica',
		'philblack',
		'knaan',
		'alexis',
		'sacca',
		'om'
	],
	init: function() {
		Home.setupSignupForm();
		Home.setupReserveForm();
		Home.setupValidators();
		Home.showExample();
		Home.carousel.people.sort(function() {return 0.5 - Math.random()}); // random sort
		DirectoryCarousel.setupCarousel(Home.carousel);
        $('input').eq(0).focus();
        $("#dialog").dialog({
			autoOpen: false,
			bgiframe: true,
			modal: true,
			buttons: {
				"OK": function() {
					$(this).dialog('close');
				}
			}
        });
	},
	showExample: function() {
		var ee = Math.floor(Math.random() * Home.examples.length);
		$('a#exampleprofile').attr('href','http://about.me/'+Home.examples[ee]);
		$('a#exampleprofile img').attr("src","https://gp1.wac.edgecastcdn.net/802659/production67/images/home/examples/"+Home.examples[ee]+".jpg");
	},
	setupSignupForm: function() {
		// AJAX form
		// post-submit callback
		var showResponse = function(responseText, statusText)  {
			// for normal html responses, the first argument to the success callback
			// is the XMLHttpRequest object's responseText property
			// if the ajaxForm method was passed an Options Object with the dataType
			// property set to 'xml' then the first argument to the success callback
			// is the XMLHttpRequest object's responseXML property
			// if the ajaxForm method was passed an Options Object with the dataType
			// property set to 'json' then the first argument to the success callback
			// is the json data object returned by the server
			$('#submitbutton').attr('disabled','');
			if (statusText === 'success'){
				if (responseText['success'] === true) {
					window.location = "/new_user";
				} else {
					if (responseText['alternate']) {
						$('#dialog_text').html(responseText['error']+responseText['alternate']);
					}
					else if (responseText['redirect']) {
						$('#dialog_text').html(responseText['error']);
						$('#dialog').dialog('option', 'buttons', { 'Take me there' : function() { window.location = responseText['redirect']; } });
					} else {
					   $('#dialog_text').html(responseText['error']);
					}
					$('#dialog').dialog('open');
				}
			} else {
				$('#dialog_text').html('AJAX error. Please check your internet connection and try again.');
				$('#dialog').dialog('open');
			}
		};
		var options = {
			target:'',   // target element(s) to be updated with server response
			beforeSubmit:  function() {
				$('#submitbutton').attr('disabled','disabled');
				$('#dialog').dialog('option', 'buttons', {
					"OK": function() {
						$(this).dialog('close');
					}
				});
				validation = $('#signup').validate({debug:true,errorClass:'ui-state-error-custom',errorElement:'div'}).form();
				if (validation === true) {
					return true;
				} else {
					$('#submitbutton').attr('disabled','');
					return false;
				}
			},  // pre-submit callback goes to form validation
			success: showResponse,  // post-submit callback
			// other available options:
			//url:       url         // override for form's 'action' attribute
			//type:      type        // 'get' or 'post', override for form's 'method' attribute
			dataType:  'json'        // 'xml', 'script', or 'json' (expected server response type)
			//clearForm: true        // clear all form fields after successful submit
			//resetForm: true        // reset the form after successful submit
			// $.ajax options can be used here too, for example:
			//timeout:   3000
		};
		// bind form using 'ajaxForm'
		$('#signup').ajaxForm(options);
	},
	setupReserveForm: function() {
		// post-submit callback
		function showResponse(responseText, statusText)  {
			// for normal html responses, the first argument to the success callback
			// is the XMLHttpRequest object's responseText property
			// if the ajaxForm method was passed an Options Object with the dataType
			// property set to 'xml' then the first argument to the success callback
			// is the XMLHttpRequest object's responseXML property
			// if the ajaxForm method was passed an Options Object with the dataType
			// property set to 'json' then the first argument to the success callback
			// is the json data object returned by the server
			$('#submitbutton').attr('disabled','');
			if (statusText === 'success'){
				if (responseText['success'] === true) {
					window.location = "/confirmation";
				} else {
					if (responseText['alternate']) {
						$('#dialog_text').html(responseText['error']+responseText['alternate']);
					}
					else if (responseText['redirect']) {
						$('#dialog_text').html(responseText['error']);
						$('#dialog').dialog('option', 'buttons', { 'Take me there' : function() { window.location = responseText['redirect']; } });
					} else {
					   $('#dialog_text').html(responseText['error']);
					}
					$('#dialog').dialog('open');
				}
			} else {
				$('#dialog_text').html('AJAX error. Please check your internet connection and try again.');
				$('#dialog').dialog('open');
			}
		};
		var options = {
            target:'',   // target element(s) to be updated with server response
            beforeSubmit:  function() {
                $('#submitbutton').attr('disabled','disabled');
                $('#dialog').dialog('option', 'buttons', {
                    "OK": function() {
                        $(this).dialog('close');
                    }
                });
                validation = $('#closed_signup').validate({debug:true,errorClass:'ui-state-error-custom',errorElement:'div'}).form();
                if (validation === true) {
                    return true;
                }
                else {
                    $('#submitbutton').attr('disabled','');
                    return false;
                }
            },  // pre-submit callback goes to form validation
            success:       showResponse,  // post-submit callback
            // other available options:
            //url:       url         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            dataType:  'json'        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit
            // $.ajax options can be used here too, for example:
            //timeout:   3000
        };
        // bind form using 'ajaxForm'
        $('#closed_signup').ajaxForm(options);
	},
	setupValidators: function() {
        jQuery.validator.addMethod("username", function(value, element) {
				$(element).parents('fieldset').find('.alarum').remove();
				var bValid = checkLength(value,2,127) && checkRegexp(value,/^([0-9a-zA-Z_\-\.])+$/i);
				if (! bValid) {
					$(element).parents('fieldset').append('<span class="alarum">Must be at least 2 characters and may only consist of letters, numbers, underscores, hyphens, and periods.</span>');
					return bValid;
				}
				var bValid = checkRegexp(value,/^([0-9a-zA-Z])/i);
				if (! bValid) {
					$(element).parents('fieldset').append('<span class="alarum">Must begin with a letter or a number.</span>');
					return bValid;
				}
				var bValid = checkRegexp(value,/([0-9a-zA-Z])$/i);
				if (! bValid) {
					$(element).parents('fieldset').append('<span class="alarum">Must end with a letter or a number.</span>');
					return bValid;
				}
				return bValid;
            },''); //<span class="alarum">Must be at least 2 characters and may only consist of letters, numbers, underscores, hyphens, and periods.</span>');
        jQuery.validator.addMethod("password-custom", function(value, element) {
				var bValid = checkLength(value,6,64) && checkRegexp(value,/^\S+$/,"Password field does not allow spaces");
				return bValid;
            },"<span class='alarum'>Must be between 6 and 64 characters and may not contain spaces</span>");
        jQuery.validator.addMethod("email-custom", function(value, element) {
				var bValid = checkLength(value,6,254);
				// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
				bValid = bValid && checkRegexp(value,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
				return bValid;
           },"<span class='alarum'>Please enter a valid email address.</span>");
	}
};
$(document).ready(Home.init);
//*/
</script>
		<div
			style="display: none; z-index: 1000; outline-width: 0px; outline-style: initial; outline-color: initial;"
			class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable"
			tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog">
			<div
				class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
				<span class="ui-dialog-title" id="ui-dialog-title-dialog">Message</span><a
					href="#" class="ui-dialog-titlebar-close ui-corner-all"
					role="button"><span class="ui-icon ui-icon-closethick">close</span>
				</a>
			</div>
			<div id="dialog" style="" class="ui-dialog-content ui-widget-content">
				<p id="dialog_text"></p>
			</div>
			<div
				class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
				<div class="ui-dialog-buttonset">
					<button type="button">
						OK
					</button>
				</div>
			</div>
		</div>
	</body>
</html>